<template>
	<view class="page-loader" :class="{ 'show': show, 'hide': !show }">
		<view class="loader-content">
			<view class="spinner">
				<view class="spinner-inner"></view>
			</view>
			<view class="loader-text">{{ text }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "PageLoader",
		props: {
			show: {
				type: Boolean,
				default: false
			},
			text: {
				type: String,
				default: '数据加载中'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-loader {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 0.95);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9999;
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s ease;
		
		&.show {
			opacity: 1;
			visibility: visible;
		}
		
		&.hide {
			opacity: 0;
			visibility: hidden;
		}
		
		.loader-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.spinner {
				width: 80rpx;
				height: 80rpx;
				position: relative;
				margin-bottom: 30rpx;
				
				.spinner-inner {
					width: 100%;
					height: 100%;
					border: 8rpx solid #e9e9e9;
					border-top: 8rpx solid #73F0EA;
					border-radius: 50%;
					animation: spin 1s linear infinite;
				}
			}
			
			.loader-text {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				color: #666666;
			}
		}
	}
	
	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}
</style>